<template>
	<view style="
      height: 100vh;
      display: flex;
      flex-direction: column;
      align-items: center;
    ">
		<view class="top" style="position: fixed">
			<view class="checked">
				<view class="selected" @click="showCheckType">
					{{ city.name ? city.name : "临沂市" }}
				</view>
				<view style="height: 26rpx; background-color: #f2f2f2ff; width: 1px"></view>
				<view class="selected" @click="showCheckLocation">
					{{ nowCheck }}
				</view>
			</view>
		</view>
		<view class="project-list" style="margin-top: 60rpx">
			<view class="project-info" v-for="(item, index) in supplyList" :key="index"
				@click="supply('supplyDetails', item)">
				<view class="info-left">
					<image :src="
              item.imageUrl
                ? baseUrl + item.imageUrl
                : '../../static/image/1.jpg'
            " />
				</view>
				<view class="info-right">
					<text style="
              white-space: nowrap;
              overflow: hidden;
              text-overflow: ellipsis;
              font-size: 14px;
              font-weight: 600;
            ">[{{ item.statusName }}]{{ item.projectName }}</text>
					<text class="project-detail">项目类型：{{
              item.transferMethodName ? item.transferMethodName : "暂无"
            }}</text>
					<text class="project-detail">项目编号：{{ item.xmbh }}</text>
					<text class="project-detail">坐落位置：{{ item.location ? item.location : "暂无" }}</text>
					<text class="project-detail">发布时间：{{ item.publishDate ? item.publishDate : "暂无" }}</text>
					<text style="font-size: 14px; color: #df5500ff; font-weight: 600">{{
            item.listingPrice + item.unitName
          }}</text>
				</view>
			</view>
		</view>
		<uni-popup ref="selectType">
			<view style="
          height: 600rpx;
          background-color: white;
          width: 100%;
          border: 1px solid white;
        ">
				<scroll-view scroll-y :style="{
            'margin-top': isMap ? '170rpx' : '',
            height: isMap ? '530rpx' : '600rpx',
          }">
					<view v-for="(item, index) in type" :key="index" style="display: flex; justify-content: center"
						@click="checkType(item)">
						<view style="
                display: flex;
                width: 90%;
                justify-content: space-between;
                height: 60rpx;
                align-items: center;
              ">
							<view>{{ item }}</view>
							<uni-icons type="checkmarkempty" size="24" v-show="nowCheck == item"></uni-icons>
						</view>
					</view>
				</scroll-view>
			</view>
		</uni-popup>
		<check-city ref="selectLocation" :height="'80'" :sheight="'614'" @change="checkLocation"></check-city>

		<uni-popup ref="rangeSelect">
			<view style="
          height: 600rpx;
          background-color: white;
          width: 100%;
          border: 1px solid white;
        ">
				<view style="margin-top: 35px">
					<scroll-view style="height: 430rpx" scroll-y>
						<view v-for="(item, index) in rangeList" :key="index"
							style="display: flex; justify-content: center" @click="checkFangshi(item)">
							<view style="
                  display: flex;
                  width: 90%;
                  justify-content: space-between;
                  height: 60rpx;
                  align-items: center;
                ">
								<view>{{ item }}</view>
								<uni-icons type="checkmarkempty" size="24" v-show="fangshi == item"></uni-icons>
							</view>
						</view>
					</scroll-view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>
<script>
	import {
		api
	} from "@/utils/api.js";
	import checkCity from "../../components/checkCity/checkCity.vue";
	export default {
		components: {
			checkCity
		},
		data() {
			return {
				title: "Hello",
				city: 0,
				value: 0,
				type: 0,
				type: [
					"全部类型",
					"农村土地承包经营权",
					"农村集体资源性资产",
					"农村经营性资产",
					"农业林权",
					"农业生产设施设备",
					"水利设施",
					"农村集体建设工程",
					"集体建设用地",
					"农村宅基地住房",
					"农业知识产权",
					"农村集体股权",
					// "涉农项目",
					"农村集体采购",
					"农村物资集中采购",
					//"村集体工程项目"
				],
				baseUrl: this.$baseUrl,
				locations: [
					"临沂市",
					"兰山区",
					"河东区",
					"郯城县",
					"兰陵县",
					"沂水县",
					"沂南县",
					"平邑县",
					"费县",
					"蒙阴县",
					"莒南县",
					"临沭县",
				],
				rangeList: ["全部方式", "承包", "转让", "出租", "入股", "抵押", "其他"],
				supplyList: [],
				typeCheck: "类型",
				locationCheck: "",
				isMap: false,
				fangshi: "方式",
				city: uni.getStorageSync("nowCity"),
				nowCheck: "全部类型",
				nowPage: 1,
			};
		},
		onLoad() {
			this.getSupplyProjectPage(true);
			let port = uni.getSystemInfoSync().platform;
			if (port == "android" || port == "ios") {
				this.isMap = false;
			} else {
				this.isMap = true;
			}
		},
		onReachBottom() {
			this.nowPage++;
			this.getSupplyProjectPage(false);
		},
		methods: {
			async getSupplyProjectPage(e) {
				let nowCheck = "";
				let that = this;
				switch (this.nowCheck) {
					case "全部类型":
						nowCheck = "";
						break;
					case "农村土地承包经营权":
						nowCheck = "0";
						break;
					case "农村集体资源性资产":
						nowCheck = "1";
						break;
					case "农村经营性资产":
						nowCheck = "2";
						break;
					case "农业林权":
						nowCheck = "3";
						break;
					case "农业生产设施设备":
						nowCheck = "4";
						break;
					case "水利设施":
						nowCheck = "5";
						break;
					case "农村集体建设工程":
						nowCheck = "6";
						break;
					case "集体建设用地":
						nowCheck = "7";
						break;
					case "农村宅基地住房":
						nowCheck = "8";
						break;
					case "农业知识产权":
						nowCheck = "9";
						break;
					case "农村集体股权":
						nowCheck = "10";
						break;
					// case "涉农项目":
					// 	nowCheck = "11";
					// 	break;
					case "农村集体采购":
						nowCheck = "12";
						break;
					case "村集体工程项目":
						nowCheck = "13";
						break;	
					case "农村物资集中采购":
						nowCheck = "14";
						break;
					default:
						break;
				}
				let res = await api.getSupplyProjectPage({
					pageNum: that.nowPage,
					pageSize: 10,
					areaId: that.city.id,
					level: that.city.level,
					projectTypeCode: nowCheck,
				});
				console.log("供应项目列表", res);
				if (e) {
					that.supplyList = res.data.rows;
					uni.pageScrollTo({
						scrollTop: 0,
						duration: 0,
					});
				} else {
					that.supplyList = [...that.supplyList, ...res.data.rows];
				}
			},
			showRange() {
				this.$refs.selectLocation.close();
				this.$refs.selectType.close(1);
				this.$refs.rangeSelect.open("top");
			},
			showCheckType() {
				this.$refs.selectType.close();
				this.$refs.rangeSelect.close();
				this.$refs.selectLocation.open("top");
			},
			checkType(e) {
				this.nowPage = 1;
				this.supplyList = [];
				this.nowCheck = e;
				this.$refs.selectType.close();
				this.getSupplyProjectPage(true);
			},
			checkFangshi(e) {
				this.fangshi = e;
			},
			showCheckLocation() {
				this.$refs.selectLocation.close();
				this.$refs.rangeSelect.close();
				this.$refs.selectType.open("top");
			},
			checkLocation(e) {
				this.nowPage = 1;
				this.supplyList = [];
				this.city = e;
				console.log(e);
				this.getSupplyProjectPage(true);
			},
			supply(e, a) {
				uni.navigateTo({
					url: "/pages/" + e + "/" + e + "?data=" + JSON.stringify(a),
				});
			},
			change(e) {
				console.log("e:", e);
			},
		},
	};
</script>

<style scoped lang="less">
	.top {
		width: 100%;
		z-index: 1000;
		background-color: white;
		box-shadow: 0px 2px 2px #e5e5e580;
		display: flex;
		flex-direction: column;
		align-items: center;

		.checked {
			display: flex;
			width: 100%;
			align-items: center;
			justify-content: space-between;

			.selected {
				flex: 1;
				height: 76rpx;
				font-size: 14px;
				color: #5b5b5bff;
				font-weight: 600;
				display: flex;
				align-items: center;
				justify-content: center;
			}
		}
	}

	.project-list {
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;

		.project-info {
			width: 92%;
			margin-top: 20rpx;
			margin-bottom: 20rpx;
			display: flex;

			.info-left {
				image {
					width: 220rpx;
					height: 300rpx;
					border-radius: 10rpx;
				}
			}

			.info-right {
				width: 470rpx;
				margin-left: 8rpx;
				display: flex;
				justify-content: space-around;
				flex-direction: column;

				.project-detail {
					font-size: 28rpx;
					color: #303030;
				}
			}
		}
	}
</style>
